<!DOCTYPE html>
<!-- Check that resizing a (potentially accelerated) canvas properly clears its
     contents even if the layout size of the canvas does not change. Expected
     output is a blank canvas.
     https://bugs.webkit.org/show_bug.cgi?id=80871 -->
<html>
  <head>
    <style>
      #canvas {
        outline: solid 1px black;
        width: 300px;
        height: 300px;
      }
    </style>
    <script src="../../resources/run-after-layout-and-paint.js"></script>
    <script>
      function runTest() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 300, 300);
        runAfterLayoutAndPaint(repaintTest, true);
      }

      function repaintTest() {
        var canvas = document.getElementById('canvas');
        // This changes the resolution of the canvas but keeps its layout size constant.
        canvas.width = canvas.width / 2;
      }
    </script>
  </head>
  <body onload="runTest();">
    <canvas id="canvas" width="300" height="300"/>
  </body>
</html>
